<template>
  <div ref="chartPanelRef" style="height: 100%; position: relative">
    <div style="height: 200px" data-test="alert-preview-chart">
      <PanelSchemaRenderer v-if="chartData" :height="6" :width="6" :panelSchema="chartData"
        :selectedTimeObj="dashboardPanelData.meta.dateTime" :variablesData="{}" searchType="UI" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import PanelSchemaRenderer from "../dashboards/PanelSchemaRenderer.vue";
import { reactive } from "vue";
import { onBeforeMount } from "vue";
import { cloneDeep } from "lodash-es";
import { useStore } from "vuex";

const getDefaultDashboardPanelData: any = () => ({
  data: {
    version: 2,
    id: "",
    type: "bar",
    title: "",
    description: "",
    config: {
      show_legends: true,
      legends_position: null,
      unit: null,
      unit_custom: null,
      base_map: {
        type: "osm",
      },
      map_view: {
        zoom: 1,
        lat: 0,
        lng: 0,
      },
    },
    queryType: "sql",
    queries: [
      {
        query: "",
        customQuery: false,
        fields: {
          stream: "",
          stream_type: "logs",
          x: [],
          y: [],
          z: [],
          filter: [],
          latitude: null,
          longitude: null,
          weight: null,
        },
        config: {
          promql_legend: "",
          layer_type: "scatter",
          weight_fixed: 1,
          limit: 0,
          // gauge min and max values
          min: 0,
          max: 100,
        },
      },
    ],
  },
  layout: {
    splitter: 20,
    querySplitter: 20,
    showQueryBar: false,
    isConfigPanelOpen: false,
    currentQueryIndex: 0,
  },
  meta: {
    parsedQuery: "",
    dragAndDrop: {
      dragging: false,
      dragElement: null,
      dragSource: null,
      dragSourceIndex: null,
      currentDragArea: null,
      targetDragIndex: null,
    },
    errors: {
      queryErrors: [],
    },
    editorValue: "",
    dateTime: { start_time: "", end_time: "" },
    filterValue: <any>[],
    stream: {
      selectedStreamFields: [],
      customQueryFields: [],
      functions: [],
      streamResults: <any>[],
      filterField: "",
    },
  },
});

let dashboardPanelData: any = null;

const props = defineProps({
  query: {
    type: String,
    default: "",
  },
  formData: {
    type: Object,
    default: () => ({}),
  },
  isAggregationEnabled: {
    type: Boolean,
    default: false,
  },
  selectedTab: {
    type: String,
    default: "",
  },
});

onBeforeMount(() => {
  dashboardPanelData = reactive({ ...getDefaultDashboardPanelData() });
  dashboardPanelData.data.type = "line";
  dashboardPanelData.data.queryType =
    props.selectedTab === "promql" ? "promql" : "sql";
  dashboardPanelData.data.queries[0].query = props.query;
  dashboardPanelData.data.queries[0].fields.stream = props.formData.stream_name;
  dashboardPanelData.data.queries[0].fields.stream_type =
    props.formData.stream_type;
  dashboardPanelData.data.queries[0].customQuery = true;
});

const chartPanelRef = ref(null);
const chartData = ref({});

const store = useStore();

const refreshData = () => {
  const relativeTime = props.formData.trigger_condition.period;

  const endTime = new Date().getTime() * 1000;
  let new_relative_time = 5;
  if (relativeTime < 5) { new_relative_time = relativeTime };

  const startTime = endTime - new_relative_time * 60 * 1000000;

  dashboardPanelData.meta.dateTime = {
    start_time: new Date(startTime),
    end_time: new Date(endTime),
  };

  let xAxis = [
    {
      alias: "zo_sql_key",
      color: null,
      column: store.state.zoConfig.timestamp_column || "_timestamp",
      label: "Timestamp",
    },
  ];

  let yAxis = [];

  if (props.isAggregationEnabled) {
    yAxis.push({
      aggregationFunction: props.formData.query_condition.aggregation.function,
      alias: "zo_sql_val",
      color: null,
      column: store.state.zoConfig.timestamp_column || "_timestamp",
      label: "",
    });
  } else {
    yAxis.push({
      aggregationFunction: "count",
      alias: "zo_sql_val",
      color: null,
      column: store.state.zoConfig.timestamp_column || "_timestamp",
      label: "",
    });
  }

  if (
    props.selectedTab === "custom" &&
    props.formData.query_condition?.aggregation?.group_by?.length > 0 &&
    props.formData.query_condition?.aggregation?.group_by[0]?.trim() !== ""
  ) {
    xAxis.push({
      alias: "x_axis_2",
      color: null,
      column: props.formData.query_condition.aggregation.group_by[0],
      label: "x_axis_2",
    });
  }

  if (props.selectedTab === "promql") {
    xAxis = [];
    yAxis = [];
  }

  dashboardPanelData.data.queries[0].fields.x = xAxis;
  dashboardPanelData.data.queries[0].fields.y = yAxis;

  dashboardPanelData.data.queries[0].query = props.query;
  dashboardPanelData.data.queries[0].fields.stream = props.formData.stream_name;
  dashboardPanelData.data.queries[0].fields.stream_type =
    props.formData.stream_type;
  dashboardPanelData.data.queryType =
    props.selectedTab === "promql" ? "promql" : "sql";

  chartData.value = cloneDeep(dashboardPanelData.data);
};

defineExpose({ refreshData });
</script>

<style scoped></style>
